@import (reference) "~ui/styles/variables";

.suggestionItem {
  display: flex;
  align-items: stretch;
  flex-grow: 1;
  align-items: center;
  font-size: 13px;
  white-space: nowrap;
}

.suggestionItem__text, .suggestionItem__type, .suggestionItem__description {
  flex-grow: 1;
  flex-basis: 0%;
  display: flex;
  flex-direction: column;
}

.suggestionItem__type {
  flex-grow: 0;
  flex-basis: auto;
  width: 32px;
  height: 32px;
  text-align: center;
  overflow: hidden;
  padding: 4px;
}

&.suggestionItem--field {
  .suggestionItem__type {
    background-color: tint(@globalColorOrange, 90%);
    color: @globalColorOrange;
  }
}

&.suggestionItem--value {
  .suggestionItem__type {
    background-color: tint(@globalColorTeal, 90%);
    color: @globalColorTeal;
  }

  .suggestionItem__text {
    width: auto;
  }
}

&.suggestionItem--operator {
  .suggestionItem__type {
    background-color: tint(@globalColorBlue, 90%);
    color: @globalColorBlue;
  }
}

&.suggestionItem--conjunction {
  .suggestionItem__type {
    background-color: tint(@globalColorPurple, 90%);
    color: @globalColorPurple;
  }
}

&.suggestionItem--recentSearch {
  .suggestionItem__type {
    background-color: @globalColorLightGray;
    color: @globalColorMediumGray;
  }

  .suggestionItem__text {
    width: auto;
  }
}

.suggestionItem__text {
  flex-grow: 0; /* 2 */
  flex-basis: auto; /* 2 */
  font-family: "SFMono-Regular", Consolas, "Liberation Mono", Menlo, Courier, monospace;
  margin-right: 32px;
  width: 250px;
  overflow: hidden;
  text-overflow: ellipsis;
  padding: 4px 8px;
  color: #111;
}

.suggestionItem__description {
  color: @globalColorDarkGray;
  overflow: hidden;
  text-overflow: ellipsis;
}

.suggestionItem__callout {
  font-family: "SFMono-Regular", Consolas, "Liberation Mono", Menlo, Courier, monospace;
  background: @globalColorLightestGray;
  color: #000;
  padding: 0 4px;
  display: inline-block;
}

.suggestionTypeahead {
  .typeahead {
    .typeahead-items {
      max-height: 60vh;
      overflow-y: auto;

      .typeahead-item {
        padding: 0;
        border-bottom: none;
        line-height: normal;

        &:hover {
          cursor: pointer;
        }

        &.active {
          background-color: @globalColorLightestGray;

          .suggestionItem__callout {
            background: #fff;
          }

          .suggestionItem__text {
            color: #000;
          }

          .suggestionItem__type {
            color: #000;
          }

          .suggestionItem--field {
            .suggestionItem__type {
              background-color: tint(@globalColorOrange, 80%);
            }
          }

          .suggestionItem--value {
            .suggestionItem__type {
              background-color: tint(@globalColorTeal, 80%);
            }
          }

          .suggestionItem--operator {
            .suggestionItem__type {
              background-color: tint(@globalColorBlue, 80%);
            }
          }

          .suggestionItem--conjunction {
            .suggestionItem__type {
              background-color: tint(@globalColorPurple, 80%);
            }
          }
        }
      }
    }
  }
}
